<template>
    <a-layout >
        <a-layout-header style="background: #fff; padding: 0" :style="{  height: 'auto',minWidth:'960px'}">
            <div class="totalHeader">
                <p class="devicemanage">产品管理</p>
                <a-card :bordered="false" style="margin-left: 40px">
                    <a-row>
                        <a-col :sm="6" :xs="18">
                            <head-info title="全部分组" :content="onlineNum+'组'" :bordered="true"/>
                        </a-col>
                        <a-col :sm="6" :xs="18">
                            <head-info title="在线设备" :content="onlineNum+'个'" :bordered="true"/>
                        </a-col>
                        <a-col :sm="6" :xs="18">
                            <head-info title="设备总数" :content="devicecount"/>
                        </a-col>
                    </a-row>
                </a-card>

            </div>
        </a-layout-header>
        <a-layout-content >
            <div>
                <a-tabs defaultActiveKey="1" :size="size">
                    <a-tab-pane tab="我的产品" key="1">
                       <!-- <add-dev-form/>-->
                        <router-view></router-view>
                    </a-tab-pane>
                    <a-tab-pane tab="设备信息" key="2" >
                        <BaiMap/>
                    </a-tab-pane>
                    <a-tab-pane tab="设备管理" key="3">
                        <manage/>
                    </a-tab-pane>
                </a-tabs>

            </div>
        </a-layout-content>
    </a-layout>
</template>

<script>
    //import addDevForm from "@/components/forms/addDevForm";
    import HeadInfo from '@/components/tools/HeadInfo'
    import BaiMap from "@/components/layout/BaiMap";
    //import {getClientLocation} from '@/api/mqtt'
    import Manage from "@/components/dashboard/Manage";
    import {getClient} from "@/api/mqtt";



    export default {
        name: "Device",
        components:{
            Manage,
            //addDevForm,
            HeadInfo,
            BaiMap,

        },
        data () {
            return {
                publishMessage:'',
                activeClass: -1,

                checked: true,
                show: false,
                location: "深圳市",
                keyword: "请输入搜索关键词",
                size:"default",

                visible: false,
                checkNick: false,
                modal2Visible: false,
                url:'',
                // clientInfo:{//设备信息
                //     clientname:'',
                //     clientid:'',
                //     deviceserect:'',
                //     tags:'',
                //     add_time:'',
                //     username:'',
                //     networktype:'',
                // },
                // nodeType:'',
                // netType:'',
                createClientName:'',
                connectFlag:false,
                onlineNum:'',
                devicecount:"0台",//设备总数

                form: this.$form.createForm(this),

                client:'',


                alldata:[],
                timer:'',
                clientStatus:true
            }
        },  beforeCreate(){

        },mounted(){
            let data=JSON.parse(sessionStorage.getItem('client'))
            //console.log(data)
            this.devicecount=data.length+'台'
            var i=0
            data.forEach((index,item)=>{
                //console.log(index.state)
                index.state==0?i=i:i+=1;
              this.onlineNum=i;
            })

        },created(){

            //console.log(data.length)
           // this.getClientLocationPoint()
           // this.getClients()

        },methods: {
            // getClients(){
            //     getClient().then((res)=>{
            //         //console.log(res.data)
            //         sessionStorage.setItem('client',JSON.stringify(res.data))
            //         this.clientData=res.data
            //     }).catch()
            // },



        }


    }
</script>

<style scoped>
    .ant-tabs{
        margin-top: -82px;
        float: left;

    }
    .devicemanage{

        font-size: 1.8rem;

        float: left;
        margin-left: -100px;
        margin-right: 50px;
    }
    .content{
        margin-top: 20px;
        width: 960px;
    }
    .contentone .ant-btn{
        margin: 0 10px;

    }

    .ant-table-wrapper{
        margin-top: 20px;
        width: 100%;
        min-width: 960px;
        margin-bottom: 40px;
    }
    .total{
        width: 180px;
        height: 80px;
        position: relative;
        float: left;
        margin: 10px 0px 40px 0px;

    }
    .total:first-child{margin-left: 160px}
    .totalHeader{
        margin: 20px 160px;
        width: 720px;

    }
    .total p{
        font-size: 24px;
        margin-top: 16px;
        text-align: center;
        line-height: 25px;
    }
    .total h4{
        text-align: center;
        font-size: 16px;

        line-height: 20px;
    }
    .total:nth-child(3) p{
        color: rgb(77, 189, 218);
    }
    .total:nth-child(4) p{
        color:rgb(99, 194, 112)
    }
    .ant-layout-content{
        margin: 20px;
        background-color:  #fff;
        padding: 20px;
        min-width: 960px;
    }
    .webconsole{
        width: 240px;
        height: 480px;
    }
    .ant-tab-pane{
        height: auto;
    }.socketSetting{

         width: 840px;
         height: 360px;
         margin: 10px;
     }
    .socketSetting  p{
        width: 100px;
        line-height: 16px;
        position: absolute;
        margin: 10px;
    }
    .socketSetting .ant-form{
        margin-top: 30px;
    }
    .subSetting{
        width: 840px;
        height: 280px;
        margin: 10px;
    }

    #socketpane:hover{
        box-shadow: 0 0 10px #CCC;
        background-image: linear-gradient(to top, #e9f0f1 0%, #e9f0f1 100%);
    }
    .subscribe:hover{
        box-shadow: 0 0 10px #CCC;
        background-image: linear-gradient(to top, #d3e3f5 0%, #e7f0fd 100%);
    }
    .subscribe{
        width: 840px;
        height: 270px;
    }.publish{
         width: 840px;
         height: 240px;
     }
    .publish:hover{
        box-shadow: 0 0 10px #CCC;
        background-image: linear-gradient(to top, #ecf0f3 0%, #e7f0fd 100%);
    }
    .map {
        float: left;
        width: 100%;
        height: 600px;
        margin: 10px 10px 10px 50px;

    }
    .ant-layout-sider-trigger{
        color: #ff7744;
    }

    .listclient:hover{
        cursor: pointer;
    }
    .listitem{
        width: 340px;
        height: 64px;
        background-color: #cdeaf3;
        margin:5px 5px 5px -5px;
        border-radius: 6px;
        border-width: 0.5px;
        border-style: solid;
        border-color: #2db7f5
    }
    .item{
        float: left;
        margin: 5px;
        width: 480px;
        height: 280px;
        border-radius: 8px;
        overflow: hidden;

    }
    .item .iteminfo{
        position: relative;
        width: 480px;
        animation: movedown 0.5s ;
        animation-fill-mode: forwards;
        cursor: pointer;
        background-image: linear-gradient(120deg, #c2e9fb 0%, #e2f3fc 100%);
        border-radius: 8px;
    }
    .item .iteminfomin{
        position: relative;
        background-image: linear-gradient(120deg, #d0dff7 0%, #c2e9fb 100%);
        animation: moveup 0.5s ;
        animation-fill-mode: forwards;
        border-radius: 8px;

    }
    .item .itemcont{
        background-image: linear-gradient(120deg, #bcd3f8 0%, #c2e9fb 100%);
        position: relative;
        width: 480px;
        height: 280px;
        border-radius: 8px;
    }
    .item .infoTitle{
        position:absolute;
        font-size: 18px;
        text-align: center;
        margin: 15px 0 0 10px;
    }
    @keyframes moveup {
        from{height: 280px;}
        to{height: 60px;}
    }
    @keyframes movedown {
        from{height: 60px;}
        to{height: 280px;}
    }
    .conTitle{
        cursor: pointer;
        position: absolute;
        width: 100%;
        color: #fff;
        text-align: center;
    }
    .controller{
        width:100px;
        height: 80px;
        float: left;
        margin: 10px 5px 5px 10px;
        border-radius: 8px;
    }
    .controller:first-child{
        margin: 10px 5px 5px 20px;
    }
    .itemcont .statusLight{
        position: absolute;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
        border-radius: 50%;
        margin: 5px 5px 0px 50px;
    }

    .itemcont .controllerButton{
        width: 100%;
        margin: 40px 0 0  0;
    }
    .devInfoBox{
        position: absolute;
        width: 420px;
        height: 240px;

        margin: 60px 20px 10px 30px;

    }
    .devInfoBox .devInfoWord{
        text-align: center;
    }
    .devInfoBox .devInfo{
        width: 80px;
        height: 80px;
        float: left;

        margin: 5px 10px;
    }
    .devInfoBox .devInfoAirLogo,.devInfoHumLogo,.devInfoTempLogo,
    .devInfoPm25Logo,.devInfoPm10Logo,.devInfoPowerLogo{
        margin: 5px 20px 5px 20px;
        width: 40px;
        height: 40px;
        background-size: cover;
    }

</style>
